<template>
  <div ref="charts">
  </div>
</template>

<script>
export default {
  data() {
    return {
      member: []
    }
  },
  mounted() {

    this.$api.getMemberNum().then(res => {
      for (let item in res) {
        this.member.push(res[item])
      }
      this.init()
    })

  },
  methods: {
    init() {
      var salvProName = [
        "正式员工",
        "实习员工",
        "已离职员工",
      ];
      var salvProValue = [...this.member];
      var salvProMax = []; //背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0]);
      }
      const option = {
        title: {
          text: '员工人数统计',
          left: 'center'
        },
        backgroundColor: "white",
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "15%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [{
          type: "category",
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: salvProName,
        },
        {
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            textStyle: {
              color: "#606266",
              fontSize: "15",
            },
          },
          data: salvProValue,
        },
        ],
        series: [{
          name: "值",
          type: "bar",
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: "#9effff",
              },
              {
                offset: 1,
                color: "#9E87FF",
              },
              ]),
            },
          },
          barWidth: 20,
          data: salvProValue,
        },
          // {
          //     name: "背景",
          //     type: "bar",
          //     barWidth: 20,
          //     barGap: "-100%",
          //     data: salvProMax,
          //     itemStyle: {
          //         normal: {
          //             color: "#ccc",
          //             barBorderRadius: 30,
          //         },
          //     },
          // },
        ],
      };
      const mychart = this.$echarts.init(this.$refs.charts)
      mychart.setOption(option)
    }

  }
}
</script>

<style>
</style>